<template>
  <div class='container'>
    <el-button type="text" @click="dialogVisible"></el-button>

    <el-dialog title="预览文章" :visible.sync="dialogVisible" width="dialogWidth">
      <h2>{{ perviewList.title }}</h2>
      <span>{{ new Date(perviewList.createTime)| parseTime }}</span>
      <span :style="{ padding: '0 20px'}">{{ perviewList.username }}</span>
      <span class="el-icon-view">&nbsp;&nbsp;{{ perviewList.visits }}</span>
      <div :style="{ height: '100%', padding: '20px 0' ,backgroundColor:'#f5f5f5'}" v-html="perviewList.articleBody"></div>
    </el-dialog>

  </div>
</template>

<script>
import { detail } from '../../api/hmmm/articles'
export default {
  name: 'articles-preview',
  data () {
    return {
      dialogVisible: false,
      perviewList: {}
    }
  },
  methods: {
    async openDialogVisible (id) {
      try {
        const res = await detail(id)
        this.perviewList = res.config.params
        console.log(res)
        this.dialogVisible = true
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
